<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import * as Cesium from "cesium";
export default {
  methods: {
    initMap() {
      window.Cesium = Cesium;
      const viewer = new Cesium.Viewer("cesiumContainer", {
        // imageryProvider: false,
        baseLayerPicker: false,
        timeline: false,
        infoBox: false,
        navigationHelpButton: false,
        fullscreenButton: false,
        animation: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=c3cae4296597ad809c229c7c2ea2dc00",
          subdomains: "01234567",
        }),
        // terrainProvider: new Cesium.createWorldTerrain(),
        selectionIndicator: false,
        navigationInstructionsInitiallyVisible: false,
        contextOptions: {
          webgl: {
            alpha: true,
            depth: false,
            stencil: true,
            antialias: true,
            premultipliedAlpha: true,
            preserveDrawingBuffer: true,
            failIfMajorPerformanceCaveat: true,
          },
          allowTextureFilterAnisotropic: true,
        },
      });

      this.viewer = viewer;
      // Add Cesium OSM Buildings, a global 3D buildings layer.
      // viewer.scene.primitives.add(Cesium.createOsmBuildings());

      // Fly the camera to San Francisco at the given longitude, latitude, and height.
      viewer.camera.setView({
        destination: new Cesium.Cartesian3.fromDegrees(
          113.949051,
          22.524725,
          1000
        ),
        orientation: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-30.0),
        },
      });
      this.scene = this.viewer.scene;
      this.camera = this.viewer.camera;
      this.scene.globe.enableLighting = true;
      var utc = Cesium.JulianDate.fromDate(new Date("2022/01/01 09:00:00")); //UTC

      this.viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(
        utc,
        8,
        new Cesium.JulianDate()
      );
      this.$emit("mapLoad", viewer);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
  },
};
</script>
